<template>
  <view>
    <navbar fixed leftIcon="left" title="Token详情" shadow></navbar>

    <view class="bg-fff p-t-15 p-b-15 p-l-30 p-r-30 m-t-12">
        <view class="view flex-row align-center justify-between b-b-1 p-b-20">
            <view class="view flex-row align-center ">
                <view style="background-color:#6781FF;border-radius:50%;" class="m-r-12 w50 h50">
                </view>
                <view class="c_071 fz-16 ">DSX</view>
            </view>
            <view class="view flex-row align-center ">
                <view class="c-c4 fz-14 m-r-8">项目详情</view>
                <uni-icons  type="right" size="14" color="#C4C4C4"></uni-icons>
            </view>
        </view>
        <view class="view flex-row align-center justify-between p-t-20 ">
            <view class="fz-16 c_071">资产</view>
            <view>
                <view class="c-101 fz-14 m-b-5">100,000.0000</view>
                <view class="c_cfd fz-12">≈ ¥ 534,226,452</view>
            </view>
        </view>
    </view>
    
    <view class="m-t-15">
        <view class="bg-fff">
            <view class="view flex-row align-center justify-between h56  m-l-30 m-r-30 b-b-1">
                <view class="view flex-row align-center">
                    <view class="bold m-r-20 c-c4 m-r-20 active height100">全部</view>
                    <view class="m-r-20 c-c4 m-r-20 height100">转入</view>
                    <view class="c-c4 height100">转出</view>
                </view>

                <uni-search-bar :radius="20" class="w130 h28 seach" clearButton="none" cancelButton="none" style="background-color: #F5F6F8;padding:0;"/>
            </view> 
        </view>
        
        <view>
            <view class="view flex-row align-center justify-between h60 bg-fff p-l-30 p-r-30">
                <view class="view flex-row align-center  ">
                    <view style="background:#6781FF;border-radius:50%;" class="w26 h26 m-r-12"></view>
                    <view>
                        <view class="m-b-6 fz-14 c-1e1">0xD3d4E…CB868AD</view>
                        <view class="c-c4 fz-10">03/01 18:41:15</view>
                    </view>
                </view>
                
                <view class="c-1e1 fz-14">400DSX</view>
            </view>

            <view class="view flex-row align-center justify-between h60 bg-fff p-l-30 p-r-30">
                <view class="view flex-row align-center  ">
                    <view style="background:#6781FF;border-radius:50%;" class="w26 h26 m-r-12"></view>
                    <view>
                        <view class="m-b-6 fz-14 c-1e1">0xD3d4E…CB868AD</view>
                        <view class="c-c4 fz-10">03/01 18:41:15</view>
                    </view>
                </view>
                
                <view class="c-1e1 fz-14">400DSX</view>
            </view>

            <view class="view flex-row align-center justify-between h60 bg-fff p-l-30 p-r-30">
                <view class="view flex-row align-center  ">
                    <view style="background:#6781FF;border-radius:50%;" class="w26 h26 m-r-12"></view>
                    <view>
                        <view class="m-b-6 fz-14 c-1e1">0xD3d4E…CB868AD</view>
                        <view class="c-c4 fz-10">03/01 18:41:15</view>
                    </view>
                </view>
                
                <view class="c-1e1 fz-14">400DSX</view>
            </view>

            <view class="view flex-row align-center justify-between h60 bg-fff p-l-30 p-r-30">
                <view class="view flex-row align-center  ">
                    <view style="background:#6781FF;border-radius:50%;" class="w26 h26 m-r-12"></view>
                    <view>
                        <view class="m-b-6 fz-14 c-1e1">0xD3d4E…CB868AD</view>
                        <view class="c-c4 fz-10">03/01 18:41:15</view>
                    </view>
                </view>
                
                <view class="c-1e1 fz-14">400DSX</view>
            </view>
            
            
        </view>
    </view>
    
    <view class="h100 width100 view flex-row align-center to-fix">
        <el-button type="success"  class="w168 h48" style="line-height:70rpx;border-radius: 12px !important;">转账</el-button>
        <el-button   class="w168 h48"  style="line-height:70rpx;border-radius: 12px !important;" type="primary">收款</el-button>
    </view>
  </view>
</template>

<script>
import navbar from "@/components/uni-nav-bar";
import noData from "@/components/noData/noData";
import sibList from "@/components/sib-list/sib-list.vue";
import uniIcons from "@/components/uni-icons/uni-icons"
import elButton from '@/components/el-button/el-button'
import uniSearchBar from "@/components/uni-search-bar/uni-search-bar"
export default {
  components: {
    noData,
    sibList,
    navbar,
    uniIcons,
    uniSearchBar,
    elButton
  },
  data() {
    return {
      tabs: ["投票收益", "发放记录", "发放记录"],
      defaultIndex: 0,
      active: 0,
      list: [],
      page: 1,
      rows: 10,
      total: 0,
      more: "more",
      items: [
        { name: "已完成", key: 0 },
        { name: "已作废", key: 1 },
      ],
      showSelect: false,
    };
  },

  mounted() {
    this.getList(true);
  },
  methods: {
    hideSelect() {
      this.$refs.selector.bodyCloseMenus();
    },
    touchstart: function (e) {
      this.$refs.sibList.refreshStart(e);
    },
    touchmove: function (e) {
      this.$refs.sibList.refreshMove(e);
    },
    touchend: function (e) {
      this.$refs.sibList.refreshEnd(e);
    },
    getScrollH() {
      return uni.getSystemInfoSync() - 80 + "px";
    },
    isRefresh: function () {
      const _this = this;
      setTimeout(() => {
        uni.showToast({
          icon: "success",
          title: "刷新成功",
        });
        // const defaultData = [
        // 	'初始数据1', '初始数据2', '初始数据3', '初始数据4',
        // 	'初始数据5', '初始数据6'
        // ]
        // _this.list = defaultData
        this.getList(true, () => {
          this.$refs.sibList.endAfter();
        });
        // 刷新结束调用
      }, 1000);
    },
    scrolltolowerFn: function () {
      if (this.list.length == this.total) {
        return false;
      }
      uni.showLoading({
        title: "加载中...",
        mask: true,
      });
      // 模拟请求
      const _this = this;
      setTimeout(() => {
        // 请求成功
        this.getList(null, () => {
          uni.hideLoading();
        });
      }, 1000);
    },
    changeIndex(i) {
      this.active = i;
      this.getList(true);
    },
    getList(isReflush, cb) {
      if (isReflush) {
        this.page = 1;
      } else {
        this.page++;
      }
      this.app.post(
        {
          data: {
            status: this.active + 1,
            page: this.page,
            limit: this.rows,
          },
          url: "index.php/api/index/getOrderLogData",
        },
        (res) => {
          if (cb) {
            cb();
          }
          if (res.data && res.data.data) {
            if (this.page == 1) {
              this.list = res.data.data.value;
              if (res.data.count) {
                this.total = res.data.count.value;
              }
            } else {
              this.list = [...this.list, ...res.data.data.value];
            }
          }
        }
      );
    },
    onNavigationBarButtonTap(e) {
      if (e.index == 0) {
        this.showSelect = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f6f6;
  box-sizing: border-box;
  overflow-y: hidden;
}
::v-deep .seach {
    &.uni-searchbar {padding:0;height: 36px; border-radius: 20px;}
   
    .uni-searchbar__box {padding:0;}
}
.active {
    color:#101A50;
}
.b-b-1 {border-bottom: 1px solid #EDEDED;}
.bo {
  border: 2px solid #343438;
}
.show-detail {
  border-radius: 60rpx;
}
/deep/.auto-h {
  height: calc(100vh - 220rpx) !important;
}
.autoH {
  height: calc(100vh - 220rpx);
}
.bor-line {
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #ffffff 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0.3;
  height: 1px;
}
/deep/.auto-h {
  height: calc(100vh - 90rpx) !important;
}
.to-fix {width: 100vw;position: fixed;bottom: 0;left: 0;background: #fff;text-align: center;display: flex; justify-content: center;}
.bgs {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
